<template>
  <div class="bar-component">
    <div :id="id" style="width:100%;height:100%;"></div>
  </div>
</template>

<script>
  import echarts from "echarts";
  import jiangxi from  "@/assets/jiangxi.json"
  echarts.registerMap('jiangxi', jiangxi)

  export default {
    props: {
      id: String,
      data: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
      return {
        myChart:null,
        list:[],
        option: {
          tooltip: {
            trigger: 'item',
            formatter:function (params){}
          },
          visualMap: {
            type: 'piecewise',
            right: '1%'
          },
          series: [
            {
              name: '',
              type: 'map',
              mapType: 'jiangxi', // 自定义扩展图表类型
              itemStyle: {
                normal: {label: {show: true}},
                emphasis: {label: {show: true}, color: '#fce15c'},
              }
            }
          ]
        }
      }
    },
    mounted(){
      this.init()
    },
    methods: {
      init() {
        let { id, data } = this;
        if(data && data.length > 0) this.formatOptions(data);
        this.myChart = echarts.init(document.getElementById(id));
        this.myChart.setOption(this.option);
      },
      formatOptions(v) {
        v.map((v, i) =>{
          this.list.push({
            name: v.regionName,
            value1: '建筑业企业：' + v.jzy + '人</br>勘察业企业：' + v.kc + '人</br>设计企业：' + v.sj + '人</br>监理企业：' + v.jl + '人</br>质量检测：' + v.zljc + '人</br>造价咨询：' + v.zjzx + '人',
            value: Number(v.jzy) + Number(v.kc) + Number(v.sj) + Number(v.jl) + Number(v.zljc) + Number(v.zjzx)
          })
        })
        // 自定义tooltip
        this.option.tooltip.formatter = params => {
          var s = "";
          var myseries = this.list;
            for (var i = 0; i < myseries.length; i++) {
              if (myseries[i].name == params.name) {
                s += myseries[i].name + '</br>' + myseries[i].value1 + '</br>';
              }
          }
          return s;
        };
        this.option.visualMap.pieces=[
          {gt: 3000, color: '#3284ff'},
          {gt: 2000, lte: 3000, color: '#669dec'},
          {gt: 1000, lte: 2000, color: '#96bcf2'},
          {gt: 500, lte: 1000, color: '#cbdef8'},
          {lt: 500, color: '#eef0fd'}
        ]
        this.option.series[0].data=this.list;
      }
    },
    watch: {
      data: {
        handler(cur, old) {
          this.formatOptions(cur);
          this.myChart.setOption(this.option);
        },
        deep: true
      }
    }
  };
</script>

<style scoped>
  .bar-component {
    height: 100%;
    width: 100%;
  }
</style>

